<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <div class="sort-title">
          <el-button
            type="primary"
            size="mini"
            @click="addEconomic"
          >添加经济</el-button>
          <el-input
            v-model="searchVal"
            placeholder="请输入关键字"
            class="input-with-select"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="InputSearch"
            />
          </el-input>
        </div>
        <el-divider />
        <div class="sort-content">
          <el-table border :data="economicList" style="width: 100%">
            <el-table-column align="center" label="图片">
              <template #default="{ row }">
                <img
                  v-fixImg="require('@/assets/common/head.jpg')"
                  style="width: 100px; height: 100px"
                  :src="row.image"
                >
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="name"
              label="名称"
              width="180"
            />
            <el-table-column align="center" prop="email" label="邮箱" />
            <el-table-column align="center" prop="phone" label="电话" />
            <el-table-column align="center" prop="address" label="地址" />
            <el-table-column align="center" prop="desc" label="介绍" />
            <el-table-column align="center" label="操作">
              <template #default="{ row }">
                <el-button
                  type="primary"
                  size="mini"
                  @click="editEconomic(row.id)"
                >编辑</el-button>
                <el-button
                  type="danger"
                  size="mini"
                  @click="delEconomic(row.id)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <el-pagination
            :current-page="currentPage"
            style="text-align: center"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="economicData._limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="sizeChange"
            @current-change="currentChange"
          />
          <!-- 弹窗 -->
          <el-dialog
            :title="economicForm.id ? '编辑经纪' : '添加经纪'"
            :visible="isShowDialog"
            @close="btnCanCel"
          >
            <el-form ref="economicForm" :rules="rules" :model="economicForm">
              <el-form-item label="名称" prop="name" label-width="60px">
                <el-input v-model="economicForm.name" autocomplete="off" />
              </el-form-item>
              <el-form-item label="邮箱" label-width="60px">
                <el-input v-model="economicForm.email" autocomplete="off" />
              </el-form-item>
              <el-form-item label="电话" label-width="60px">
                <el-input v-model="economicForm.phone" autocomplete="off" />
              </el-form-item>
              <el-form-item label="地址" label-width="60px">
                <el-input v-model="economicForm.address" autocomplete="off" />
              </el-form-item>
              <el-form-item label="描述" prop="desc" label-width="60px">
                <el-input
                  v-model="economicForm.desc"
                  resize="none"
                  :autosize="{ minRows: 2, maxRows: 4 }"
                  type="textarea"
                  placeholder="请输入内容"
                />
              </el-form-item>
              <el-form-item label="封面" label-width="60px">
                <!-- 图片组件 -->
                <imageUpload ref="economicPhoto" />
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="btnCanCel">取 消</el-button>
              <el-button type="primary" @click="btnOk">确 定</el-button>
            </div>
          </el-dialog>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getEconomicList, getTotal, getEconomic, addEconomic, editEconomic, delEconomic } from '@/api/economic'
export default {
  data() {
    return {
      economicList: [],
      searchVal: '',
      total: 0,
      currentPage: 1,
      economicData: {
        _limit: 5,
        _start: 0,
        name_contains: ''
      },
      isShowDialog: false,
      economicForm: {
        id: '',
        name: '',
        email: '',
        phone: '',
        address: '',
        desc: '',
        image: ''
      },
      rules: {
        name: [{ required: true, message: '该项不能为空!', trigger: 'blur' }],
        desc: [{ required: true, message: '该项不能为空!', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getEconomicList()
  },
  methods: {
    sizeChange(val) {
      this.economicData._limit = val
      this.getEconomicList()
    },
    currentChange(val) {
      this.economicData._start = (val - 1) * this.economicData._limit
      this.currentPage = val
      this.getEconomicList()
    },
    async getEconomicList() {
      this.economicList = await getEconomicList(this.economicData)
      this.total = await getTotal({ name_contains: this.economicData.name_contains })
    },
    InputSearch() {
      this.economicData.name_contains = this.searchVal
      this.economicData._start = 0
      this.getEconomicList()
    },
    addEconomic() {
      this.isShowDialog = true
    },
    async editEconomic(id) {
      this.isShowDialog = true
      const { name, email, phone, address, desc, image } = await getEconomic(id)
      this.economicForm = {
        id,
        name,
        email,
        phone,
        address,
        desc
      }
      this.$refs.economicPhoto.fileList = [{ url: image }]
    },
    async delEconomic(id) {
      try {
        await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await delEconomic(id)
        this.$message.success({
          message: '删除成功!',
          center: true
        })
        // 当前页没数据时，页数后退1
        if (this.economicList.length === 1) {
          this.currentPage--
          this.economicData._start = (this.currentPage - 1) * this.economicData._limit
        }
        this.getEconomicList()
      } catch (error) {
        this.$message.info({
          message: '已取消删除!',
          center: true
        })
      }
    },
    async btnOk() {
      try {
        await this.$refs.economicForm.validate()
        if (!this.$refs.economicPhoto.fileList[0]) {
          this.$message.warning({
            message: '封面图片不能为空',
            center: true
          })
          return
        }
        if (this.$refs.economicPhoto.fileList[0].status !== 'success') {
          this.$message.warning({
            message: '请等待图片上传完成',
            center: true
          })
          return
        }
        this.economicForm.image = this.$refs.economicPhoto.fileList[0].url
        if (this.economicForm.id) {
        // 编辑
          await editEconomic(this.economicForm)
          this.$message.success({
            message: '编辑分类成功',
            center: true
          })
        } else {
          // 新增
          await addEconomic(this.economicForm)
          this.$message.success({
            message: '新增分类成功',
            center: true
          })

          this.currentPage = 1
          this.economicData._start = 0
        }
        this.getEconomicList()
        this.isShowDialog = false
      } catch (error) {
        return error
      }
    },
    btnCanCel() {
      this.economicForm = {
        id: '',
        name: '',
        email: '',
        phone: '',
        address: '',
        desc: '',
        image: ''
      }
      this.$refs.economicPhoto.fileList = []
      this.$refs.economicForm.resetFields()
      this.isShowDialog = false
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  .app-container {
    .sort-title {
      display: flex;
      justify-content: space-between;
      ::v-deep .el-input-group {
        width: 30%;
      }
    }
  }
}
</style>
